<template>
<view class="step_wrapper">
    <view class="step_sec">
        <view class="title flex">
            <view>基本资料</view>
            <view>1/2</view>
        </view>
        <view class="input_sec flex">
            <view>您的姓名</view>
            <input @input="inputRealname" maxlength="20" placeholder="请输入真实姓名" type="text">
        </view>
        <view class="input_sec select flex">
            <view>证件类型</view>
            <picker @change="idcardtypeChange" class="picker" mode="selector" :range="idcardtypeList" rangeKey="name" :value="idcardtypeIdx" v-if="idcardtypeList.length">
                <view :class="'type' + (idcardtypeName?'':' placeholder')">{{idcardtypeName?idcardtypeName:'请选择证件类型'}}</view>
            </picker>
            <image mode="scaleToFill" src="/static/images/icon_arrow_gray.png"></image>
        </view>
        <view class="input_sec flex">
            <view>证件号码</view>
            <input @input="inputIdcard" maxlength="18" placeholder="请输入证件号码" :type="idcardType">
        </view>
        <view class="input_sec select flex">
            <view>现居住地</view>
            <picker @change="areaChange" @columnchange="areaColumnChange" class="picker" mode="multiSelector" :range="areaArray" rangeKey="title" :value="areaIndex" v-if="areaArray[0].length">
                <view :class="'area' + (selectedArea?'':' placeholder')">{{selectedArea?selectedArea:'请选择省市区'}}</view>
            </picker>
            <image mode="scaleToFill" src="/static/images/icon_arrow_gray.png"></image>
        </view>
        <view class="extend">
      注册表示同意<view @tap="toAgreement">《注册协议》</view>
        </view>
    </view>
    <view @tap="toSecond" class="btn theme_btn">下一步</view>
    <view @tap="makePhoneCall" class="call">客服热线：400-123-123</view>
</view>
</template>

<script>
var a = function () {
  function a(a, t) {
    var e = [],
        r = !0,
        i = !1,
        n = void 0;

    try {
      for (var d, o = a[Symbol.iterator](); !(r = (d = o.next()).done) && (e.push(d.value), !t || e.length !== t); r = !0);
    } catch (a) {
      i = !0, n = a;
    } finally {
      try {
        !r && o.return && o.return();
      } finally {
        if (i) throw n;
      }
    }

    return e;
  }

  return function (t, e) {
    if (Array.isArray(t)) return t;
    if (Symbol.iterator in Object(t)) return a(t, e);
    throw new TypeError("Invalid attempt to destructure non-iterable instance");
  };
}(),
    t = require("../../utils/request.js"),
    e = require("../../utils/util.js"),
    r = function (a) {
  return a && a.__esModule ? a : {
    default: a
  };
}(require("../../utils/api.js")),
    i = (getApp(), r.default.otherArea),
    n = r.default.baseData,
    d = r.default.getZyzId;

export default {
  data() {
    return {
      realname: "",
      idcardtypeList: [],
      idcardtypeIdx: 0,
      idcardtypeName: "居民身份证",
      idcardtypeVal: "0",
      idcardType: "idcard",
      idcard: "",
      provinceId: "",
      cityId: "",
      countyId: "",
      allArea: [],
      areaIndex: [0, 0, 0],
      areaArray: [[], [], []],
      selectedArea: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (a) {
    this.initData();
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {
    return {
      title: "让公益更生活 让生活更公益",
      path: "/pages/index/index",
      imageUrl: "/static/images/zyh_logo.jpg"
    };
  },
  methods: {
    initData: function () {
      this.idcardTypeRequest(), this.areaRequest();
    },
    inputRealname: function (a) {
      this.setData({
        realname: a.detail.value
      });
    },
    inputIdcard: function (a) {
      this.setData({
        idcard: a.detail.value
      });
    },
    makePhoneCall: function () {
      uni.makePhoneCall({
        phoneNumber: "4000035125"
      });
    },
    toSecond: function () {
      var a = this;
      this.realname ? this.idcardtypeVal ? this.idcard ? 0 != this.idcardtypeVal && (0, e.isIdCardNo)(this.idcard) ? uni.showToast({
        title: "请输入正确的证件号",
        icon: "none"
      }) : this.provinceId ? this.zyzIdRequest().then(function (t) {
        t.data.errCode === e.ERR_OK ? uni.showModal({
          content: "您已经是人人志愿用户，可直接登录",
          showCancel: !0,
          confirmText: "去登录",
          confirmColor: "#24CBA9",
          cancelText: "输错了",
          cancelColor: "#333333",
          success: function (a) {
            a.confirm && uni.redirectTo({
              url: "/pages/entry/login"
            });
          }
        }) : uni.navigateTo({
          url: "/pages/entry/register-sec?realname=" + a.realname + "&idcardType=" + a.idcardtypeVal + "&idcard=" + a.idcard + "&regProvince=" + a.provinceId + "&regCity=" + a.cityId + "&regCounty=" + a.countyId
        });
      }) : uni.showToast({
        title: "请选择常住地区",
        icon: "none"
      }) : uni.showToast({
        title: "请输入证件号码",
        icon: "none"
      }) : uni.showToast({
        title: "请选择证件类型",
        icon: "none"
      }) : uni.showToast({
        title: "请输入您的姓名",
        icon: "none"
      });
    },
    zyzIdRequest: function () {
      var a = {
        url: d,
        data: {
          credentials_no: this.idcard
        }
      };
      return (0, t.request)(a, "uncommon", !0);
    },
    idcardTypeRequest: function () {
      var a = this;
      var params = {
        data: {
          api: n,
          code: "zq_card_type"
        }
      };
      return (0, t.request)(params, "dict", !1).then(function (t) {
		var result = e.formatSelectOption(t);
        console.log(t), result.length > 0 && a.setData({
          idcardtypeList: result
        });
      });
    },
    areaRequest: function () {
      var a = this,
		  r = {
		url: i
	  };
	  return (0, t.request)(r, "common", !1, "app").then(function (t) {console.log(t)
		if (t.data.success) {
		  for (var r = t.data.data, i = [[], [], []], n = [], d = [], o = [], s = 0, c = r.length; s < c && "其他" !== r[s].title; s++) {
			var u = {};
			u.title = r[s].title, u.id = r[s].id, n.push(u);
		  }
			
		  d = a.getCityArr(n[0].title, r), o = a.getCounty(d[0].title, d), i[0] = n, i[1] = d, i[2] = o, a.setData({
			allArea: r,
			areaArray: i
		  });
		}
	  });
    },
    idcardtypeChange: function (a) {
      console.log(a);
      var t = this.idcardtypeList;
      0 == t[a.detail.value].value ? this.setData({
        idcardType: "idcard"
      }) : this.setData({
        idcardType: "text"
      }), this.setData({
        idcardtypeIdx: a.detail.value,
        idcardtypeName: t[a.detail.value].name,
        idcardtypeVal: t[a.detail.value].value
      });
    },
    areaChange: function (t) {
      var e = a(t.detail.value, 3),
                r = e[0],
                i = e[1],
                n = e[2],
                d = "",
                o = "",
                s = "",
                c = "",
                u = "",
                l = "";
            d = this.areaArray[0][r].id, 
      	  c = this.areaArray[0][r].title, 
      	  this.areaArray[1].length > 0 && (o = this.areaArray[1][i].id, u = this.areaArray[1][i].title),
      	   this.areaArray[2].length > 0 && (s = this.areaArray[2][n].id, l = this.areaArray[2][n].title), 
      	   this.setData({
              provinceId: d,
              cityId: o,
              countyId: s,
              selectedArea: c + " " + u + " " + l
            });
    },
    areaColumnChange: function (a) {
      var t = a.detail,
                e = t.column,
                r = t.value,
                i = [[], [], []],
                n = [],
                d = [],
                o = [],
                s = this.areaIndex;
      
            switch (s[e] = r, e) {
              case 0:
                n = this.areaArray[0], 0 != (d = this.getCityArr(n[r].title, this.allArea)).length && (o = this.getCounty(d[0].title, d)), s[1] = 0, s[2] = 0;
                break;
      
              case 1:
                n = this.areaArray[0], d = this.areaArray[1], o = this.getCounty(d[r].title, d), s[2] = 0;
                break;
      
              case 2:
                n = this.areaArray[0], d = this.areaArray[1], o = this.areaArray[2];
                break;
      
              default:
                n = this.areaArray[0], d = this.areaArray[1], o = this.areaArray[2];
            }
      
            i[0] = n, i[1] = d, i[2] = o, this.setData({
              areaArray: i,
              areaIndex: s
            });
    },
    getCityArr: function (a, t) {
      for (var e in t) if (a === t[e].title) return t[e].children || [];
    },
    getCounty: function (a, t) {
      for (var e in t) if (a === t[e].title) return t[e].children || [];
    },
    toAgreement: function () {
      uni.navigateTo({
        url: "/pages/tmp/tmp?id=59b4ad2a-8b62-11e5-af70-606dc70c2bf4"
      });
    }
  }
};
</script>
<style>
page {
    position: relative;
}

.step_wrapper,page {
    width: 100%;
    height: 100%;
}

.step_wrapper {
    background: #f4f4f4;
}

.step_wrapper.step2 {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 9;
    transition: left .33s ease;
}

.step_sec {
    width: 100%;
    height: auto;
    background: #fff;
}

.title {
    justify-content: space-between;
    padding: 60rpx 30rpx;
    font-size: 44rpx;
    font-weight: 500;
}

.title view:last-child {
    font-size: 30rpx;
    font-weight: 400;
    color: #999;
}

.extend {
    width: 100%;
    height: 94rpx;
    line-height: 94rpx;
    padding-left: 30rpx;
    font-size: 28rpx;
    color: #333;
}

.extend view {
    display: inline-block;
    color: #108ee9;
}

.btn {
    width: 690rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 30rpx;
    margin: 60rpx auto 40rpx;
}

.input_sec .captcha {
    position: absolute;
    top: 50%;
    right: 30rpx;
    z-index: 11;
    transform: translateY(-50%);
    width: 188rpx;
    height: 80rpx;
    border: 1rpx solid #e1e2e3;
}

.input_sec input.mini_input {
    flex: 0 0 300rpx;
    width: 300rpx;
}

.input_sec .sms_btn {
    position: absolute;
    top: 50%;
    right: 30rpx;
    transform: translateY(-50%);
    z-index: 11;
    width: 164rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #24cba9;
    text-align: center;
    font-size: 26rpx;
    color: #fff;
    text-align-last: unset;
}

.input_sec .picker {
    flex: auto;
    max-width: 400rpx;
    height: 110rpx;
    padding: 0 12rpx;
    font-size: 30rpx;
    color: #333;
}

.input_sec .picker .area,.input_sec .picker .type {
    width: 100%;
    height: 100%;
    color: #333;
    text-align-last: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.input_sec .picker .area.placeholder,.input_sec .picker .type.placeholder {
    color: #999;
}
</style>